<!--
  - Author: jiangzw
  - Date: 2020-07-25
  - Name:'当前工单状态步骤条'
  -
  - dackTable组件添加 @onlySelectedRow='onlySelectedRow'
  - 添加方法
  -     onlySelectedRow(val,index){
  -         this.atPresentClickRow = val;
  -         this.stepModalShow=true
  -     },
  -     stepModalShowCancel(){
  -       this.stepModalShow=false
  -     },
-->
<template>
    <Modal
        v-model="modal1"
        title="工单进度"
        width='1100'
        footer-hide
        @on-cancel="cancel">
        <Steps :current="workStatus">
            <Step title="待下发" :content="atPresentClickRow.createTime"></Step>
            <Step title="已下发" :content="atPresentClickRow.workTime"></Step>
            <Step title="已接单" :content="atPresentClickRow.orderTime"></Step>
            <Step title="执行中" :content="underway"></Step>
            <Step title="已完成" :content="atPresentClickRow.completeTime"></Step>
            <Step title="已评价" content=""></Step>
            <Step title="已归档" content=""></Step>
        </Steps>
    </Modal>
</template>
<script>
    import moment from 'moment';
    export default {
        props:{
            // 是否打开
            modal:{
                type:Boolean,
                default:false
            },
            // 当前行数据
            atPresentClickRow: {
                type: Object,
                default: () => ({})
            },
        },
        computed: {
            /**
             * 执行中时间计算
             */
            underway() {
                if (this.workStatus === 3) {
                    return moment().format('YYYY-MM-DD HH:mm:ss');
                } else if (this.workStatus > 3) {
                    return this.atPresentClickRow.completeTime;
                } else {
                    return ''
                }
            },
            workStatus() {
                switch(this.atPresentClickRow.workStatus)
                    {
                        case "01"://未下发
                        return 0
                        break;
                        case "02"://已下发
                        return 1
                        break;
                        case "03":
                        case "08"://已接单
                        return 3
                        break;
                        case "04"://已完成
                        return 4
                        break;
                        case "05"://已评价
                        return 5
                        break;
                        case "06":  //已归档
                        return 6
                        default:
                        return 0
                    }
            },
        },
        watch:{
            modal:{
                handler(val){
                    this.modal1=val
                }
            }
        },
        data () {
            return {
                modal1: this.modal,
                current:this.workStatus
            }
        },
        methods: {
            /**
             * 关闭
             */
            cancel () {
                this.$emit('modalCancel')
            }
        }
    }
</script>
<style lang='scss' scoped>
/deep/.ivu-steps{
    .ivu-steps-tail{
        padding-left: 40px;
        i::before {
            content: "";
            width: 12px;
            height: 12px;
            display: inline-block;
            border-top: 2px solid #e8eaec;
            border-right: 2px solid #e8eaec;
            transform: rotate(45deg);
            position: absolute;
            right: 0;
            bottom: -5px;
        }
    }
   .ivu-steps-item{
    &.ivu-steps-status-finish {
        .ivu-steps-tail i::before { border-color: #2d8cf0;}
    }
    &.ivu-steps-status-process{
        .ivu-steps-main{
            .ivu-steps-title{
                color:#2d8cf0;
            }
        }
        .ivu-steps-head{
            .ivu-steps-head-inner{
                background-color: transparent;
            }
        }
        &:nth-child(1){
            .ivu-steps-head{
                .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_01_b.png');
                }  
            } 
        };
        &:nth-child(2){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_02_b.png');
              }  
            }
            
        };
        &:nth-child(3){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_03_b.png');
              }  
            }
            
        };
        &:nth-child(4){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_04_b.png');
              }  
            }
            
        };
        &:nth-child(5){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_05_b.png');
              }  
            }
            
        };
        &:nth-child(6){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_07_b.png');
              }  
            }
            
        };
        &:nth-child(7){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_06_b.png');
              }  
            }
            
        };
    }
    &.ivu-steps-status-finish{
        .ivu-steps-main{
            .ivu-steps-title{
                color:#2d8cf0;
            }
        }
        .ivu-steps-head{
            .ivu-steps-head-inner{
                background-color: transparent;
            }
        }
        &:nth-child(1){
            .ivu-steps-head{
                .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_01_b.png');
                }  
            } 
        };
        &:nth-child(2){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_02_b.png');
              }  
            }
            
        };
        &:nth-child(3){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_03_b.png');
              }  
            }
            
        };
        &:nth-child(4){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_04_b.png');
              }  
            }
            
        };
        &:nth-child(5){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_05_b.png');
              }  
            }
            
        };
        &:nth-child(6){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_07_b.png');
              }  
            }
            
        };
        &:nth-child(7){
            .ivu-steps-head{
              .ivu-steps-head-inner{
                  background-image: url('~@/assets/img/provisionServices/step_06_b.png');
              }  
            }
            
        };
    }
    .ivu-steps-head{
        .ivu-steps-head-inner{
            border-radius:0;
            border: 0px solid #ccc;
            /*height: 32px;
            width: 32px;*/
            background-size: 100% 100%;
                span{
                    display: none
                }
        }
    }
    &:nth-child(1){
        .ivu-steps-head{
          .ivu-steps-head-inner{
              background-image: url('~@/assets/img/provisionServices/step_01.png');
          }  
        }
        
    };
    &:nth-child(2){
        .ivu-steps-head{
          .ivu-steps-head-inner{
              background-image: url('~@/assets/img/provisionServices/step_02.png');
          }  
        }
        
    };
    &:nth-child(3){
        .ivu-steps-head{
          .ivu-steps-head-inner{
              background-image: url('~@/assets/img/provisionServices/step_03.png');
          }  
        }
        
    };
    &:nth-child(4){
        .ivu-steps-head{
          .ivu-steps-head-inner{
              background-image: url('~@/assets/img/provisionServices/step_04.png');
          }  
        }
        
    };
    &:nth-child(5){
        .ivu-steps-head{
          .ivu-steps-head-inner{
              background-image: url('~@/assets/img/provisionServices/step_05.png');
          }  
        }
        
    };
    &:nth-child(6){
        .ivu-steps-head{
          .ivu-steps-head-inner{
              background-image: url('~@/assets/img/provisionServices/step_07.png');
          }  
        }
        
    };
    &:nth-child(7){
        .ivu-steps-head{
          .ivu-steps-head-inner{
              background-image: url('~@/assets/img/provisionServices/step_06.png');
          }  
        }
        
    };
   }
}
// content: "";
// width: 1rem;
// height: 1rem;
// display: inline-block;
// border-top: 2px solid darkgray;
// border-right: 2px solid darkgray;
// transform: rotate(45deg);
    
</style>